<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4609743_p8lib51rjx.css">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #app{
        margin: 40px auto;
        height: 750px;
        width: 900px;
        border: 2px solid rgba(255, 0, 0, 0.776);
    }
    h3{
        font-size: 18px;
        border-bottom: 1px dashed #ccc;
        padding-bottom: 20px;
        margin: 30px 15px 20px 15px;
    }
    p{
        color: #999;
        font-size: 14px;
        line-height: 40px;
        margin: 0 15px 0 15px;
    }
    .star{
        width: 870px;
        height: 25px;
        margin: 0 15px 0 15px;
    }
    ul{
        list-style-type: none;
    }
    li{
        display: block;
        width: 20px;
        height: 20px;
        float: left;
        cursor: pointer;
        margin: 4px 2px;
    }
    .iconfont{
        color: #ccc;
        font-size: 20px;
    }
    .orange{
        color: #e84c3d;
    }
    .main{
        width: 855px;
        height: 40px;
        background: #f3f3f3;
        margin: 20px 15px 40px 15px;
        line-height: 40px;
        letter-spacing: 2px;
        padding-left: 15px;
    }
    em{
        color: #e84c3d;
        margin-left: 15px;
        position: relative;
        top: 5px;
    }
    .box{
        width: 870px;
        height: 140px;
        margin: 0 15px 0 15px;
    }
    .li{
        width: 142px;
        height: 43px;
        text-align: center;
        line-height: 43px;
        border: 1px solid #e8e8e8;
        position: relative;
        margin: 0 45px 20px 0;
    }
    .borders{
        border: 1px solid #e84c3d;
    }
    .message{
        width: 870px;
        height: 250px;
        margin: 0 15px 0 15px;
    }
    .message textarea{
        width: 870px;
        height: 250px;
    }
    .evaluate{
        width: 154px;
        height: 48px;
        background: #f36a5a;
        border-radius: 6px;
        margin: 30px 20px 20px 725px;
        color: #fff;
        text-align: center;
        line-height: 48px;
        cursor: pointer;
    }
</style>
<body>
    <div id="app">
        <h3>给“新闻订单”的评价</h3>
        <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p>
        <div class="star">
            <ul>
                <li ><span @mouseover="show=1" @mouseout="show=0" @click="button=1" class="iconfont icon-shoucang" :class="{orange:button>=1 || show>=1}"></span></li>
                <li ><span @mouseover="show=2" @mouseout="show=0" @click="button=2" class="iconfont icon-shoucang" :class="{orange:button>=2 || show>=2}"></span></li>
                <li ><span @mouseover="show=3" @mouseout="show=0" @click="button=3" class="iconfont icon-shoucang" :class="{orange:button>=3 || show>=3}"></span></li>
                <li ><span @mouseover="show=4" @mouseout="show=0" @click="button=4" class="iconfont icon-shoucang" :class="{orange:button>=4 || show>=4}"></span></li>
                <li ><span @mouseover="show=5" @mouseout="show=0" @click="button=5" class="iconfont icon-shoucang" :class="{orange:button>=5 || show>=5}"></span></li>
            </ul>
            <em><span v-show="show===1 || button===1">差评</span>
            <span v-show="show===2 || button===2">较差</span>
            <span v-show="show===3 || button===3">中等</span>
            <span v-show="show===4 || button===4">一般</span>
            <span v-show="show===5 || button===5">优秀</span></em>
        </div>
        <div class="main">本次交易，乖，摸摸头 给您留下了什么印象呢？</div>
        <div class="box">
            <ul>
                <li class="li" @click.prevent="a=!a" :class="{borders:a===true}">专业水平高<div><span class="iconfont icon-duihao" v-show="a===true" style="color: #e84c3d; margin-left: 10px; position: relative; bottom: 40px; right: -50px;"></span></div></li>
                <li class="li" @click.prevent="b=!b" :class="{borders:b===true}">专业水平高<div><span class="iconfont icon-duihao" v-show="b===true" style="color: #e84c3d; margin-left: 10px; position: relative; bottom: 40px; right: -50px;"></span></div></li>
                <li class="li" @click.prevent="c=!c" :class="{borders:c===true}">专业水平高<div><span class="iconfont icon-duihao" v-show="c===true" style="color: #e84c3d; margin-left: 10px; position: relative; bottom: 40px; right: -50px;"></span></div></li>
                <li class="li" @click.prevent="d=!d" :class="{borders:d===true}">专业水平高<div><span class="iconfont icon-duihao" v-show="d===true" style="color: #e84c3d; margin-left: 10px; position: relative; bottom: 40px; right: -50px;"></span></div></li>
                <li class="li" @click.prevent="e=!e" :class="{borders:e===true}">专业水平高<div><span class="iconfont icon-duihao" v-show="e===true" style="color: #e84c3d; margin-left: 10px; position: relative; bottom: 40px; right: -50px;"></span></div></li>
                <li class="li" @click.prevent="f=!f" :class="{borders:f===true}">专业水平高<div><span class="iconfont icon-duihao" v-show="f===true" style="color: #e84c3d; margin-left: 10px; position: relative; bottom: 40px; right: -50px;"></span></div></li>
            </ul>
        </div>
        <div class="message">
            <textarea type="text" v-model="imports" maxlength="200"></textarea>
            <span>还可以输入{{200-imports.length}}字</span>
        </div>
        <div class="evaluate" @click="thank=1">评价完成</div>
        <div v-show="thank===1">感谢您的评价！么么哒(* ￣3)(ε￣ *)</div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref} = Vue;
    const app = createApp({
        setup(){
            let show = ref(0)
            let button = ref(0)
            let orange = ref('orange')
            let borders = ref('borders')
            let a = ref(false)
            let b = ref(false)
            let c = ref(false)
            let d = ref(false)
            let e = ref(false)
            let f = ref(false)
            let imports = ref('')
            let thank = ref(0)
            return{
                show,
                orange,
                button,
                show,
                borders,
                a,b,c,d,e,f,
                imports,
                thank
            }
        }
    })
    app.mount('#app')
</script>
</html>